<template>
  <div class="suggestion">
    <div class="box">
      <!--分类-->
      <div class="classify">
        <Select v-model="type" clearable style="width:200px">
          <Option v-for="i in typeList" :value="i.value" :key="i.value">
            {{ i.label }}
          </Option>
        </Select>
      </div>

      <!--文本描述-->
      <div class="describe">
        <Input v-model="suggestDesc"
               maxlength="500"
               :autosize="{minRows: 5}"
               :rows="5"
               show-word-limit
               type="textarea"
               placeholder="请详细描述你的反馈"
               style="width: 440px"/>
      </div>

      <!--联系方式-->
      <div class="contact">
        <div class="iphoneNo">
          <Input v-if="isLogin" v-model="loginIphoneNo" readonly style="width: 300px"/>
          <Input v-if="!isLogin" v-model="iphoneNo" placeholder="请输入手机号" style="width: 300px"/>
        </div>
        <div class="email">
          <Input v-if="isLogin" v-model="loginUserEmail" readonly style="width: 300px"/>
          <Input v-if="!isLogin" v-model="email" placeholder="请输入邮箱号" style="width: 300px"/>
        </div>
      </div>

      <!--提交-->
      <div class="submit">
        <div v-if="submitFlag">
          <Button size="default" type="success" @click="submit">提交反馈</Button>
        </div>
        <div v-if="!submitFlag">
          <Button size="default">提交反馈</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getCookie} from "../../../tools/cookie";
  import {checkEmail, checkIphoneNo} from "../../../tools/checkAccount";

  export default {
    name: "",
    components: {},
    data() {
      return {
        //反馈类型
        type: "",
        suggestType: "",
        //反馈类型列表
        typeList: [
          {
            value: "bug",
            label: "功能故障"
          },
          {
            value: "suggestion",
            label: "优化建议"
          },
          {
            value: "other",
            label: "其他"
          }
        ],
        //反馈描述
        suggestDesc: "",
        //手机号
        iphoneNo: "",
        //邮箱号
        email: "",
        //提交按钮flag
        submitFlag: true
      }
    },
    computed: {
      isLogin() {
        return this.Store.getters.getIsLogin;
      },
      loginIphoneNo() {
        return this.Store.getters.getUserInfo.iphoneNo;
      },
      loginUserEmail() {
        console.log(this.Store.getters.getUserInfo);
        return this.Store.getters.getUserInfo.userEmail;
      }
    },
    methods: {
      checkType:function(){
        //校验数据是否为空
        if (this.type == "") {
          this.$Notice.warning({
            title: "请选择分类"
          })
          return false;
        } else {
          if (this.type == "bug") {
            this.suggestType = 1
          }
          if (this.type == "suggestion") {
            this.suggestType = 2
          }
          if (this.type == "other") {
            this.suggestType = 3
          }
          return true;
        }
      },
      checkSuggestDesc:function(){
        if (this.suggestDesc == "") {
          this.$Notice.warning({
            title: "请描述你的反馈"
          })
          return false;
        }
        return true;
      },
      checkIphoneNo:function(){
        //校验数据是否为空
        if (this.iphoneNo == "") {
          this.$Notice.warning({
            title: "请填写手机号"
          })
          return false;
        }else if(!checkIphoneNo(this.iphoneNo)){
          this.$Notice.warning({
            title: "手机号格式错误"
          })
          return false;
        }
        return true;
      },
      checkEmail:function(){
        //校验数据是否为空
        if (this.email == "") {
          this.$Notice.warning({
            title: "请填写邮箱"
          })
          return false;
        }else if(!checkEmail(this.email)){
          this.$Notice.warning({
            title: "邮箱格式错误"
          })
          return false;
        }
        return true;
      },
      submit: function () {
        //校验类型
        let b1 = this.checkType();
        //校验数据是否为空
        let b2 = this.checkSuggestDesc();

        if(!this.isLogin){
          //没登录的话校验 手机号 邮箱
          let b3 = this.checkIphoneNo();
          let b4 = this.checkEmail();
          if(!b3 || !b4){
            return false;
          }
        }
        if(!b1 || !b2){
          return false;
        }
        //幂等
        this.submitFlag = false

        let no = ""
        let email = ""
        if (this.isLogin) {
          no = this.loginIphoneNo
          email = this.loginUserEmail
        } else {
          no = this.iphoneNo
          email = this.email
        }
        let data = {
          feedbackType: this.suggestType,
          feedbackDesc: this.suggestDesc,
          iphoneNo: no,
          email: email
        }
        this.axios.post(`/feedback/feedback/feedback`, data)
          .then(resp => {
            if (resp.data.flag) {
              this.$Notice.success({
                title: "反馈成功"
              })
              this.suggestType = ""
              this.suggestDesc = ""
            }
            this.submitFlag = true
          })
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>
  .suggestion {
    background-color: #ffeaad;
    padding-top: 20px;
    width: 1200px;
    min-height: calc(100vh - 70px);
    margin: 0 auto;
  }

  .suggestion .box {
    margin-left: 20px;
  }

  /*分类*/
  .suggestion .box .classify {
    /*margin-top: 20px;*/
  }

  /*描述*/
  .suggestion .box .describe {
    margin-top: 20px;
  }

  /*联系方式*/
  .suggestion .box .contact {
    margin-top: 20px;
  }

  .suggestion .box .contact .iphoneNo,
  .suggestion .box .contact .email {
    margin-top: 20px;
  }

  /*提交反馈*/
  .suggestion .box .submit {
    margin-top: 20px;
  }
</style>
